@charset "utf-8";

/*=========================Reset_start==========================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 全局变量 */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --danger-color: #e74c3c;
    --warning-color: #f1c40f;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --border-radius: 8px;
    --transition-speed: 0.3s;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
dl,
dt,
dd,
ol,
ul,
li,
form,
table,
th,
td,
a,
img,
span,
strong,
var,
em,
input,
textarea,
select,
option {
    margin: 0;
    padding: 0;
}


/*去内外边距*/

html,
body {
    font-family: "微软雅黑", "宋体", Arail, Tabhoma;
    text-align: left;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, 
        rgba(147, 88, 247, 0.1),
        rgba(37, 172, 232, 0.1), 
        rgba(83, 213, 169, 0.1));
    background-attachment: fixed;
    color: #2c3e50;
}


/*字体 文本居左*/

ul {
    list-style: none;
}


/*去ul li 小点*/

img {
    border: 0 none;
}


/*img IE6 兼容问题*/

input,
select,
textarea {
    outline: 0;
}


/*去除点击蓝框*/

textarea {
    resize: none;
    overflow: auto;
}


/*锁定多行文本框大小 与文字超出出现滚动条*/

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*表格边框合并 边框间距0*/

th,
strong,
var,
em {
    font-weight: normal;
    font-style: normal;
}


/*特殊文字粗细 样式显示正常*/

a {
    text-decoration: none;
}


/*a标签去下划线*/

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}


/*清浮动*/

a {
    color: #000000;
}


/*==========================Reset_End===========================*/

.bg16d {
    background: #16dcb8;
}

.el-divider--horizontal {
    margin: 0;
}

.el-button {
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: all var(--transition-speed) ease;
    
    &--primary {
        background: var(--primary-color);
        border-color: var(--primary-color);
        
        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
            background: #2980b9;
            border-color: #2980b9;
        }
    }

    &--success {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
        
        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(46, 204, 113, 0.2);
        }
    }

    &--danger {
        background: var(--danger-color);
        border-color: var(--danger-color);
        
        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
        }
    }
}

.el-table {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    th {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary);
        font-weight: 600;
    }

    td {
        color: var(--text-secondary);
    }

    tr {
        transition: background-color var(--transition-speed) ease;
        
        &:hover {
            background-color: #f5f9ff !important;
        }
    }
}

.el-dialog {
    border-radius: var(--border-radius);
    overflow: hidden;
    
    &__header {
        background: var(--bg-secondary);
        padding: 20px;
        margin: 0;
    }
    
    &__title {
        font-weight: 600;
        color: var(--text-primary);
    }
}

.el-input {
    &__inner {
        border-radius: var(--border-radius);
        transition: all var(--transition-speed) ease;
        
        &:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
    }
}

.el-menu {
    border: none;
    
    &-item {
        height: 50px;
        line-height: 50px;
        margin: 8px 0;
        border-radius: var(--border-radius);
        
        &:hover {
            background: rgba(52, 152, 219, 0.1) !important;
        }
        
        &.is-active {
            background: var(--primary-color) !important;
            color: white !important;
        }
    }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    
    &:hover {
        background: #a8a8a8;
    }
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity var(--transition-speed) ease;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
